
<style> 
#showtml{ position:absolute; left:30px; top:80px; background:#FFFFFF; width:100px;}
#list_show{ position:absolute; left:30px; top:80px; background:#FFFFFF; width:120px;}
#time_tool { position:absolute; left:10px; top:10px; background:#FFFFFF; width:100%;}
.slidearea {
    padding: 10px 0;
}

.slidearea .slider {
    display: inline-block;
    position: absolute;
    width: 12px;
    height: 12px;
    top: -3px;
    left: 2px;
    border-radius: 50%;
    box-shadow: 0px 0px 1px 1px #808080;
    background-color: #fff;
}

.slidearea .layui-progress-bar {
    -moz-transition: all 0s;
    -o-transition: all 0s;
    -webkit-transition: all 0s;
    transition: all 0s;
}
.BMap_cpyCtrl {
display:none !important;
}
.anchorBL{
display:none !important;
}
</style> 

<div id="map_box" class ="baidu-maps" style="width: 100%;height: 100%" ></div> 
         
<div id="time_tool" style="color:white;background-color:rgba(320,138,138,0)">
  <form class="layui-form layui-form-pane " action="" id="trail_query_form" lay-filter="trail_query_form">
    
    <div class="layui-form-item" style="color:black">
      <div class="layui-inline">
        <label class="layui-form-label layui-bg-green">刷新频率</label>
        <div class="layui-input-inline">
          <select class="layui-select" id="play_speed" name="play_speed" lay-filter="track_rate">
          <option value="1800000">30分钟</option>
          <option value="900000">15分钟</option>
          <option value="300000">5分钟</option>
          <option value="60000">60秒</option>
          <option value="30000">30秒</option>
          <option value="15000" selected="">15秒</option>
          <option value="5000">5秒</option>
        </select>
        </div>
        <div class="layui-form-mid layui-word-aux">—</div>
        <a class="layui-btn" style="width: 60px" id="rate_num">15</a>
        <a class="layui-btn" id="track_ctl"><i class="fa fa-stop" style="font-size: 12px"></i> 停止</a>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label layui-bg-green" style="font-size: 12px;width: 60px">详情</label>
        <div class="layui-input-inline">
          <input id="" type="checkbox" lay-skin="switch" lay-text="ON|OFF" lay-filter="footer_sw" checked >
        </div>
      </div>
    </div>
  </form>
</div>

<!-- 百度地图的相关调用，定位打点，地址解析等 -->
<script type="text/javascript" src="/static/js/bd_map.js"></script>
<script type="text/javascript">

$('.layui-body').attr('style','padding:0px;bottom:0px;top:60px;left:0')

form.render()
form.on('switch(footer_sw)',function(obj){
  // console.log(obj.elem.checked)
  footer_sw(obj.elem.checked)
})



add_device_marker_bdmap(chosed_dev,'no')

var footer_sw=function(value){
  if(chosed_dev!==null && value==true){
      $('.layui-body').attr('style','padding:0px;bottom:160px;left:0px')
      $('.layui-footer').attr('style','height:160px')
      $('.layui-footer').show()
      // $('.layui-side').hide() 
  }else{
    $('.layui-body').attr('style','padding:0px;bottom:0px;left:0px')
    // $('.layui-footer').empty()
    $('.layui-footer').hide()
    // remove_marker_bdmap(chosed_dev.device_id)
  }
}

var add_dev_detail=function(dev){
  // console.log(dev)
  var rssi=dev.dynamic.rssi
  var dev_loca=dev.dynamic.location
  var user_detail=dev.user_detail;
  var dev_user_name=dev.user_name;
  var param1=user_detail.customize_title1+'：'+user_detail.customize_value1
  var param2=user_detail.customize_title2+'：'+user_detail.customize_value2
  var param3=user_detail.customize_title3+'：'+user_detail.customize_value3

      //信息窗口参数
  var o = {
    width : 470,     // 信息窗口宽度
    height: 450,     // 信息窗口高度
    };
  var trail_window=
        '<div class="layui-row" style="height:300px";>'+
          '<div class="layui-col-md2" style="padding:2px;background-color: #F2F2F2;">'+
            '<div class="layui-card">'+
              '<div class="layui-card-body">'+
                '<table class="layui-table" lay-size="sm" lay-skin="nob" style="font-size:13px;height: 140px";>'+
                  '<tr >'+
                  '<td colspan=2><font>'+'名称： '+dev_user_name+'</font></td>'+
                  '</tr>'+
                  '<tr>'+
                  '<td colspan=2>'+'设备ID： '+dev.device_id+'</td>'+
                  '</tr>'+
                  '<tr>'+
                  '<td >'+param1+'</td>'+'<td >'+param2+'</td>'+
                  '</tr>'+
                  '<tr>'+
                  '<td >'+param3+'</td>'+
                  '</tr>'+
                  '</table>'+
              '</div>'+
            '</div>'+
          '</div>'+
          '<div class="layui-col-md10" style="padding:2px">'+
            '<table id="trail_detail_table" class="layui-table" style="padding:0px;margin:-5px" lay-filter="trail_detail_table"></table>'+
          '</div>'+
        '</div>'
  ;
  $('.layui-footer').empty()
  $('.layui-footer').append(trail_window)
};

add_dev_detail(chosed_dev)

var interact_table=function(d){
  table.render({
    elem: '#trail_detail_table',
    data: d,
    id:'trail_detail_table',
    skin:'nob',
    size:'sm',
    height:'155',
    cols: [[
        {field: 'index_num',width:80, title: '序号',templet:function(d){
          return d.LAY_INDEX
        }},
        {field: 'mileage',width:80, title: '里程',sort:true},
        {field: 'dirct',width:80, title: '方向',sort:true},
        {field: 'speed',width:80, title: '速度',sort:true},
        {field: 'serv_receive',width:180, title: '时间',sort:true},
        {field: 'location', title: '位置',templet:function(d){
          
          var location=d.location
          if(location=='0'){
            if(d.lng==0 | d.lng=='0'){
              location='地址为空'
            }else{
              location='<a id="trail'+d.id+'" class="layui-btn layui-btn-primary layui-btn-xs" >'+d.lng+'，'+d.lat+'</a>'
            }
          }
          // console.log(d)
          return location
        }},
    ]],
    limit:10000000
    // page: false
  });
}

footer_sw(true)

table.on('row(trail_detail_table)',function(obj){
  // console.log(obj.data)
  // chosed_dev.dynamic=obj.data
  // chosed_dev.lng=obj.data.lng
  // chosed_dev.lat=obj.data.lat
  var point=new BMap.Point(obj.data.lng,obj.data.lat)
  get_bdmap_addr(point,chosed_dev.device_id)
  setTimeout(function(){
    obj.data.device_id=chosed_dev.device_id
    open_simple_infowindow(obj.data);
    $('#trail'+obj.data.id).text(all_addr_obj[chosed_dev.device_id])
    for(var i=0;i<all_pts.length;i++){
      if(all_pts[i].id==obj.data.id){
        all_pts[i].location=all_addr_obj[chosed_dev.device_id]
      }
    }
  },200)
})

// f
var handle_trail=function(pts){
  var dev=chosed_dev
  var tarckpoint=new Array();
  for(var i=0;i<pts.length;i++){
    var lng=pts[i]['lng']
    var lat=pts[i]['lat']
    var pt_trail = new BMap.Point(lng,lat);
    tarckpoint.push(pt_trail);
  };
  var trail_points_show = new BMap.PointCollection(tarckpoint, {size: BMAP_POINT_SIZE_NORMAL,shape: BMAP_POINT_SHAPE_CIRCLE,
  color: '#18a45b'});
  map.addOverlay(trail_points_show)
  draw_line_bdmap(tarckpoint)
  map.setViewport(tarckpoint);
}

var track_rate=15000
var s_point=new BMap.Point(chosed_dev.lng,chosed_dev.lat)
var tracking_pts=[s_point]
var all_pts=[]
var handle_tracking=function(data){
  var pt=new BMap.Point(data.lng,data.lat)
  // var pt=new BMap.Point(min_lng,min_lat)
  all_pts.push(data)
  if(tracking_pts.length==2){
    tracking_pts.shift()
  }
  tracking_pts.push(pt)
  // console.log(data,tracking_pts)
  if(tracking_pts.length==2){
    handle_trail(tracking_pts)
  }
  interact_table(all_pts)
  bd_map_marker_obj_list[chosed_dev.device_id].setPosition(pt)
  // map.panTo(pt);
}

interval_func=setInterval(function(){
    post_info_ajax({'map_kind':'bd','device_id':chosed_dev.device_id},'dynamic','tracking',handle_tracking)
  },track_rate)

form.on('select(track_rate)',function(obj){
  track_rate=parseInt(obj.value)
  track_num=track_rate/1000
  $('#rate_num').text(track_num)
  if($('#track_ctl').text()!=' 追踪'){
    clearInterval(interval_func)
    interval_func=setInterval(function(){
      post_info_ajax({'map_kind':'bd','device_id':chosed_dev.device_id},'dynamic','tracking',handle_tracking)
    },track_rate)
  }
  
})

$('#track_ctl').click(function(e){
  // console.log($('#track_ctl').text(),$('#track_ctl').html())
  var func=$('#track_ctl').text()
  if(func==' 停止'){
    clearInterval(interval_func)
    $('#track_ctl').html('<i class="fa fa-play" style="font-size: 12px"></i> 追踪')
    statistic_func=''
  }else if(func==' 追踪'){
    $('#track_ctl').html('<i class="fa fa-stop" style="font-size: 12px"></i> 停止')
    interval_func=setInterval(function(){
      post_info_ajax({'map_kind':'bd','device_id':chosed_dev.device_id},'dynamic','tracking',handle_tracking)
    },track_rate)

    track_num=track_rate/1000
    statistic_func=function(){
      if(track_num==0){
        track_num=track_rate/1000
      }
      track_num=track_num-1
      $('#rate_num').text(track_num)
    }
  }
})

var track_num=track_rate/1000
statistic_func=function(){
  if(track_num==0){
    track_num=track_rate/1000
  }
  track_num=track_num-1
  $('#rate_num').text(track_num)
}


</script>

